<template>
	<view>
		<uni-nav-bar dark :fixed="true" shadow background-color="red" status-bar left-icon="left" left-text="返回"
			title="参与抽奖" @clickLeft="goBack"></uni-nav-bar>
		<!-- <image src="@/static/img/bg.png" class="bg" mode="widthFix"></image> -->
		<view class="container">
			<!-- 上部 -->
			<view class="top-section">
				<view class="thead">
					<view v-if="uptype == 1">
						<image :src="promotionImgs" class="media-preview">
						</image>
					</view>
					<view v-else-if="uptype == 2">
						<video id="myVideo" :src="promotionImgs" controls class="media-preview" autoplay></video>
					</view>
					<view v-else>播放[发布者:推广图文]</view>
				</view>
			</view>

			<!-- 下部 -->
			<view class="bottom-section" v-if="bottomTab == 1">
				<view class="wen_f zhong" style="margin-bottom: 0;">
					<view class="t1 tt1">商家抽奖</view>
					<!-- <view class="t1 tt2">恭喜获得[红旗连锁]商家现金抽奖机会</view> -->
					<view class="jiang">
						<view class="jiang_top">

							<view class="jiang_title">名称</view>
							<view class="jiang_title">类别</view>
							<view class="jiang_title">数量</view>
							<view class="jiang_title">抽奖时间</view>

						</view>
						<view class="xinxi" v-for="(item, index) in Rafflelist" :key="index">
							<view class="ww">
								<image src="@/static/img/jiang.png" class="j_img" mode="widthFix"></image>
							</view>
							<view class="ww">{{ item.Amount }}</view>
							<view class="ww">{{ item.couponCount }}名</view>
							<view class="ww date">{{ item.DatePublish }}</view>
						</view>

					</view>
					<view class="ok" style="margin-top: 5%; margin-bottom: 5%;" @tap="canyu()">参与</view>
				</view>
			</view>

			<!-- 下部 -->
			<view class="bottom-section" v-if="bottomTab == 2">
				<view class="wen_f zhong" style="margin-bottom: 0;">
					<view class="ok" style="margin: 0 auto;margin-top:5%;" @tap="choujiangtap">抽奖</view>

					<view class="di">
						<view class="cc">
							抽一个就添加一个中奖者
						</view>
						<view class="wx" v-for="(item, index) in zhongjiangNo" :key="index">
							微信号：{{ item }}
						</view>
					</view>
				</view>
			</view>

		</view>

		<view class="quan" v-if="zhezhao"></view>
		<view class="tan1" v-if="kaijiang == 1" @tap="clskaijiang">
			<view class="ok" style="margin: 0 auto;">谢谢参与</view>
		</view>

		<view class="tan1" v-if="kaijiang == 2" @tap="clskaijiang">
			<view class="cz">恭喜抽中</view>
			<view class="cdd">
				<view class="xianj">现金红包</view>
				<view class="red">100元</view>
			</view>

		</view>

	</view>
</template>

<script>
	import redFoor from '@/components/red/index.vue'
	import wenti from '@/components/red/wenti.vue'
	import top from '@/components/red/top.vue'
	import {
		index
	} from "@/api/classification";
	import {
		GetLuckyDrawListInfo,
		GetPromotionUserCouponBag,
		LuckyDrawEvent,
	} from "@/api/redlife";

	export default {
		components: {
			redFoor,
			wenti,
			top
		},
		data() {
			return {
				kaijiang: 3,
				zhezhao: false,
				zhongjiangNo: [],
				bottomTab: 1,
				wen: 0,
				listType: [],
				index: 0,
				Rafflelist: [],
				shangjiaId: "",
				uptype: 0,
				promotionImgs: "",
			}
		},
		onLoad(option) {
			this.shangjiaId = option.id;
			this.GetRedList();
		},
		methods: {
			GetRedList() {
				GetLuckyDrawListInfo({
						PromotionGroupId: this.shangjiaId
					})
					.then(res => {
						var data = res.data.luckyDrawCashes;
						for (var i = 0; i < data.length; i++) {
							var type = data[i].luckyDrawCouponType;
							if (type == 1) {
								data[i].Amount = data[i].couponAmount + '元';
							} else if (type == 4) {
								data[i].Amount = data[i].couponAmount + '折';
							} else if (type == 3) {
								data[i].Amount = data[i].couponName;
							} else {
								data[i].Amount = data[i].couponAmount;
							}
							var date = new Date(data[i].luckyDrawDate);
							data[i].DatePublish = this.formatDate(date, 'yyyy/MM/dd/hh');
						}
						this.Rafflelist = data;
						this.promotionImgs = `${this.$config.HTTP_REQUEST_URL}${res.data.promotionImgs}`;
						if (res.data.promotionImgs != "") {
							if (this.GetExtension(res.data.promotionImgs)) {
								this.uptype = 1;
							} else {
								this.uptype = 2;
							};
						}else{
							this.uptype = 0;
						}


					})
					.catch(res => {

					});
				// this.Rafflelist = [{
				// 		ImgSrc: "/static/img/zhe.png",
				// 		Count: 10,
				// 		DatePublish: '2024/12/12',
				// 		Amount: '9折'
				// 	},
				// 	{
				// 		ImgSrc: "/static/img/zhe.png",
				// 		Count: 50,
				// 		DatePublish: '2024/12/12',
				// 		Amount: '100元'
				// 	},
				// 	{
				// 		ImgSrc: "/static/img/zhe.png",
				// 		Count: 100,
				// 		DatePublish: '2024/12/12',
				// 		Amount: '100元'
				// 	},
				// ];

			},
			GetExtension(filePath) {
				let match = /\.([0-9a-z]+)(?=\?|$)/i.exec(filePath.split('/').pop());
				let extension = match ? match[1] : '';
				const imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp', 'svg'];
				// 检查文件扩展名是否在图片扩展名数组中
				return imageExtensions.includes(extension);
			},
			formatDate: function(date, fmt) {
				date.toLocaleString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '');
				if (/(y+)/.test(fmt)) {
					fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
				}
				let o = {
					'M+': date.getMonth() + 1,
					'd+': date.getDate(),
					'h+': date.getHours(),
					'm+': date.getMinutes(),
					's+': date.getSeconds()
				}
				for (let k in o) {
					if (new RegExp(`(${k})`).test(fmt)) {
						let str = o[k] + ''
						fmt = fmt.replace(RegExp.$1, RegExp.$1.length === 1 ? str : this.padLeftZero(str))
					}
				}
				return fmt
			},
			padLeftZero: function(str) {
				return ('00' + str).substr(str.length)
			},
			clskaijiang() {
				this.kaijiang = 3;
				this.zhezhao = false;
			},
			choujiangtap() {
				this.zhezhao = true;
				this.kaijiang = 1;
			},
			canyu() {
				this.bottomTab = 2; //切换展示中将列表
				this.getZhongjiangNo(this.shangjiaId); //获取抽奖列表
				this.PrizeDraw(this.shangjiaId); //获取抽奖列表
				// uni.navigateTo({
				// 	url: '/pages/InfoSet/PrizeShow?id=' + this.shangjiaId
				// })
			},
			getZhongjiangNo(id) {
				GetPromotionUserCouponBag({
						"PromotionsId": id
					})
					.then(res => {
						if (res.status == 0) {
							this.zhongjiangNo = res.data.map(t => this.maskPhoneNumber(t.couponCode));
							// this.zhongjiangNo = [
							// 	"158****8968", "158****3658", "158****3634", "189****6525", "152****6596",
							// 	"182****3201"
							// ];
						}
					})
					.catch(res => {
						console.log(res);
					});
			},
			maskPhoneNumber(phoneNumber) {
				try {
					// 使用字符串的substring方法获取前3位和后4位
					const start = phoneNumber.substring(0, 3);
					const end = phoneNumber.substring(7);

					// 返回拼接结果，中间部分用四个星号代替
					return `${start}****${end}`;
				} catch {
					return '';
				}
			},
			PrizeDraw(id) {
				LuckyDrawEvent({
						"PromotionsId": id,
						"OpenId": this.$store.state.user.openid
					})
					.then(res => {
						if (res.status == 0) {
							console.log("抽奖")
						}
					})
					.catch(res => {
						console.log(res);
					});
			},
			select(index) {
				this.index = index
			},
			selMerchant(id) {
				uni.navigateTo({
					url: '/pages/red/tuiguang?id=' + id
				})
			},

			nato(url) {
				uni.navigateTo({
					url
				})
			},
			wenti() {
				this.wen = 1
			},
			goBack() {
				uni.navigateBack({
					delta: 1 // 返回上一页面
				});
			},
		}
	}
</script>


<style>
	/* 容器样式 */
	.container {
		display: flex;
		flex-direction: column;
		height: 100vh;
		/* 移除padding，让内容区域占满整个容器 */
	}

	/* 上部样式 */
	.top-section {
		flex: 0.4;
		/* 改为0.4，占40%高度 */
		background-color: #f3f3f3;
		padding: 0 2%;
		display: flex;
		flex-direction: column;
	}

	/* 下部样式 */
	.bottom-section {
		flex: 0.6;
		/* 改为0.6，占60%高度 */
		background-color: #d3d3d3;
		padding: 0 2%;
		display: flex;
		flex-direction: column;
		overflow-y: auto;
		/* 内容超出时可滚动 */
		padding-bottom: 2%;
	}

	.thead {
		flex: 1;
		/* 让thead在top-section中垂直居中 */
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 0;
	}

	.j_img {
		width: 100upx;
	}

	.bg {
		width: 100%;
		height: 200upx;
	}

	.zhong {
		padding-top: 2%;

	}

	.tt1 {
		color: #3D3D3D;
		font-size: 35upx;
		font-weight: 600;
	}

	.tt2 {
		color: #3D3D3D;
		margin-top: 3%;
	}

	.jiang {
		width: 98%;
		border: 1px solid #929292;
		margin: 0 auto;
		margin-top: 5%;
		padding: 3%;
		border-radius: 15upx;
	}

	.jiang_top {
		width: 100%;
		display: flex;
		border-bottom: 1px solid #D8D8D8;
		padding-bottom: 2%;

	}

	.jiang_title {
		width: 25%;
		color: #3D3D3D;
		display: flex;
		justify-content: center;
	}

	.xinxi {
		display: flex;
		margin-top: 5%;
	}

	.ww {
		width: 25%;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #3D3D3D;
		font-weight: 600;
	}

	.wen_f {
		flex: 1;
		display: flex;
		flex-direction: column;
		background-color: #fff;
		margin-top: 3%;
		border: 1px solid #929292;
		border-radius: 15rpx;
		overflow-y: auto;
	}

	.ok {
		background-color: #FC0000;
		color: #FFFFFF;
		width: 450upx;
		height: 100upx;
		font-size: 40upx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 0 auto;
		margin-top: 10%;
		padding-top: 3%;
		padding-bottom: 3%;
		border-radius: 45upx;
		margin-bottom: 15%;
	}

	.t1 {
		text-align: center;
	}

	.quan {
		position: fixed;
		z-index: 0;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		background-color: #000000;
		opacity: 0.5;

	}

	.tan {
		position: fixed;
		z-index: 99;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background-color: #FFFFFF;
		width: 95%;

		border-radius: 15upx;
		padding-top: 10%;
		padding-bottom: 10%;
	}

	.tan1 {
		position: fixed;
		z-index: 99;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background-color: #FFFFFF;
		width: 95%;

		border-radius: 15upx;
		padding-top: 10%;
		padding-bottom: 10%;
	}

	.di {
		width: 90%;
		margin: 0 auto;
		margin-top: 5%;
		padding-bottom: 10rpx;
	}

	.cc {
		color: #3D3D3D;
		font-weight: 600;
	}

	.wx {
		color: #3D3D3D;
		font-size: 32upx;
		margin-top: 2%;
	}

	.cz {
		text-align: center;
		color: #3D3D3D;
		font-size: 35upx;
	}

	.cdd {
		display: flex;
		width: 60%;
		margin: 0 auto;
		margin-top: 8%;
		justify-content: space-between;
	}

	.red {
		color: #FF0000;
		font-weight: 700;
		display: flex;
		align-items: center;
	}

	.xianj {
		background-color: #FF0000;
		color: #fff;
		padding: 3%;
		border-radius: 15upx;
		padding-left: 4.5%;
		padding-right: 4.5%;
	}
</style>